<template>
    <!-- 审批人设置细节组件 -->
    <el-drawer :append-to-body="true" title="节点设置" :visible.sync="showAppr" direction="rtl" class="set_promoter" size="550px" :before-close="saveApprover"> 
        
        <div class="appr_box">

          <el-card class="box-card" v-show="showCondition">
            <div slot="header" class="clearfix">
              <i class="iconfont icon-chushitiaojian icon"></i> 条件设置
            </div>
            <div class="condition_box">
              <!-- <div class="condition_list">
                <span>审批金额</span>
                <el-select class="operator_box" v-model="operatorValue" placeholder="请选择">
                  <el-option
                    v-for="item in operator"
                    :key="item"
                    :label="item"
                    :value="item">
                  </el-option>
                </el-select>
                <el-input placeholder="请输入金额" class="condition_inp" v-model="money">
                  <template slot="append">元</template>
                </el-input>
                
              </div> -->
              <div class="condition_list">
                <span class="condition_title">项目类型选择</span>
                <el-radio-group v-model="condition">
                  <el-radio label="EMC">EMC</el-radio>
                  <el-radio label="EPC">EPC</el-radio>
                </el-radio-group>
                
              </div>
              

            </div>
          </el-card>

          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <i class="iconfont icon-map-site-full icon"></i> 人员设置
            </div>
            <div class="top">
              <el-checkbox v-model="appoint">指定成员</el-checkbox>
              <el-button v-show="appoint" type="primary" class="btn_qx" size="small" @click="showDialog(1,0)">添加/修改成员</el-button>
              
            </div>
            <div class="list" v-show="appoint">
              
              <div class="personnel_box" >
                <el-tag class="tag_box" v-for="(item,index) in roleInfoList" :key="item.id">{{item.name}}</el-tag>
              </div>
              
            </div>

            <div class="top">
              <el-checkbox v-model="appoint1">指定角色</el-checkbox>
              <el-button v-show="appoint1" type="primary" class="btn_qx" size="small" @click="showDialog(1,1)">添加/修改角色</el-button>
            </div>
            <div class="list" v-show="appoint1">
              <div class="personnel_box" >
                <el-tag class="tag_box" v-for="(item,index) in roleInfoList1" :key="item.id">{{item.name}}</el-tag>
              </div>
            </div>

            <div class="top">
              <el-checkbox v-model="appoint2">指定部门</el-checkbox>
              <el-button v-show="appoint2" type="primary"  class="btn_qx" size="small" @click="showDialog(1,2)">添加/修改部门</el-button>
            </div>
            <div class="list" v-show="appoint2">
              <div class="personnel_box" >
                <el-tag class="tag_box"  v-for="(item,index) in roleInfoList2" :key="item.id">{{item.name}}</el-tag>
              </div>
            </div>
            
            <!-- <p class="lable_box1">审核模式</p>
            <div class="top" >
              <el-radio v-model="auditMode" label="1">会签审核（全部审核通过才会通过）</el-radio>
              <el-radio v-model="auditMode" label="2">或签审核（一个审核通过就会通过）</el-radio>
            </div> -->
            <!-- <div class="list">
              <el-button type="primary" size="small" @click="showDialog(2)">添加/修改抄送人</el-button>
              <div class="personnel_box">
                <span v-for="(item,index) in makeUserList" :key="item.id">{{item.name}}</span>
              </div>
            </div> -->
          </el-card>

          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <i class="iconfont icon-caozuoguanli icon"></i> 动作设置
            </div>
            <div class="list flex_box">
              <el-checkbox-group v-model="actionCheckList" @change='changeAction'>
                <el-checkbox label="同意"></el-checkbox>
                <el-checkbox label="提交"></el-checkbox>
                <el-checkbox label="重新提交" disabled></el-checkbox>
                <el-checkbox label="拒绝"></el-checkbox>
                <el-checkbox label="取消" ></el-checkbox>
                <!-- <el-checkbox label="领取" ></el-checkbox> -->
                <el-checkbox label="指派" ></el-checkbox>
                <!-- <el-checkbox label="通知" ></el-checkbox> -->
                <el-checkbox label="退回" ></el-checkbox>
                
              </el-checkbox-group>
            </div>
            <div class="list flex_box" v-show="actionCheckList.indexOf('退回')!=-1">
              <p class="lable_box1">可退回节点</p>
              <!-- <el-checkbox-group v-model="backNode">
                <el-checkbox v-for="item in backNodeList" :key="item.setpId" :label="item" >{{item.name}}</el-checkbox>
              </el-checkbox-group> -->
              <el-radio-group v-model="backNode" v-if="backNodeList&&backNodeList.length>0">
                <el-radio v-for="item in backNodeList" :key="item.setpId" :label="item" >{{item.name}}</el-radio>
              </el-radio-group>
            </div>
            <!-- <div class="list flex_box" v-show="actionCheckList.indexOf('指派')!=-1">
              <p class="lable_box1">指派范围</p>

              <div class="top">
                <el-checkbox v-model="assign">指派成员</el-checkbox>
                <el-button v-show="assign" type="primary" class="btn_qx" size="small" @click="showDialog(2,0)">添加/修改成员</el-button>
                
              </div>
              <div class="list" v-show="assign">
                
                <div class="personnel_box" >
                  <el-tag class="tag_box" v-for="(item,index) in assignList" :key="item.id">{{item.name}}</el-tag>
                </div>
                
              </div>

              <div class="top">
                <el-checkbox v-model="assign1">指派角色</el-checkbox>
                <el-button v-show="assign1" type="primary" class="btn_qx" size="small" @click="showDialog(2,1)">添加/修改角色</el-button>
              </div>
              <div class="list" v-show="assign1">
                <div class="personnel_box" >
                  <el-tag class="tag_box" v-for="(item,index) in assignList1" :key="item.id">{{item.name}}</el-tag>
                </div>
              </div>

              <div class="top">
                <el-checkbox v-model="assign2">指派部门</el-checkbox>
                <el-button v-show="assign2" type="primary"  class="btn_qx" size="small" @click="showDialog(2,2)">添加/修改部门</el-button>
              </div>
              <div class="list" v-show="assign2">
                <div class="personnel_box" >
                  <el-tag class="tag_box"  v-for="(item,index) in assignList2" :key="item.id">{{item.name}}</el-tag>
                </div>
              </div>

            </div> -->
            <div class="list flex_box" v-show="actionCheckList.indexOf('通知')!=-1">
              <p class="lable_box1">通知模板</p>
              <el-radio-group v-model="backNode">
                <el-radio :label="1">模板1</el-radio>
                <el-radio :label="2">模板2</el-radio>
                <el-radio :label="3">模板3</el-radio>
              </el-radio-group>
            </div>
          </el-card>
          
          <!-- <el-card class="box-card">
            <div slot="header" class="clearfix">
              <i class="iconfont icon-gaojishezhi icon"></i> 高级设置
            </div>
            <div class="list flex_box">
              
              
            </div>
          </el-card> -->

          <div class="footer" v-if='!showZZ'>
            <el-button type="primary" @click="saveApprover">确 定</el-button>
            <el-button @click="closeDrawer">取 消</el-button>
          </div>
          <memberDialog ref="memberDialog" @selectList='selectListFun(arguments)' :type="type" :transmitIdList="idList" :roleInfoList="roleInfoList"></memberDialog>
          <personnelDialog ref="personnel" @selectList='selectListFun1' :type="type" :transmitIdList="idList1"></personnelDialog>
          <roleDialog ref="role" @selectList='selectListFun2' :type="type" :diaType='diaType' :transmitIdList="roleIdList"></roleDialog>
        </div>
        <div class="zz" v-if='showZZ'></div>
    </el-drawer>
</template>
<script>

import { mapState, mapMutations } from 'vuex'
import personnelDialog from '../dialog/personnelDialog.vue' // 角色
import roleDialog from '../dialog/roleDialog.vue' // 部门
import memberDialog from '../dialog/memberDialog.vue'  // 成员

import { createNode } from "@/plugins/api.js";
export default {
    components: { personnelDialog,roleDialog,memberDialog },
    props: ['directorMaxLevel','nodeInfo','showAppr'],
    data() {
        return {
            appoint:false, // 选择人员
            appoint1:false, // 选择角色
            appoint2:false, // 选择部门
            assign:false, // 选择指派人员
            assign1:false, // 选择指派角色
            assign2:false, // 选择指派部门
            
            // userIdList:[], // 审核人id列表
            // userNameList:[], // 审核人姓名列表
            // userIdList1:[], // 审核角色id列表
            // userNameList1:[], // 审核角色姓名列表
            makeUserIdList:[], // 抄送人id列表
            makeUserList:[], // 抄送人姓名列表
            type:1, // 用来判断是抄送人还是审核人
            idList:[], //用来传给选择成员组件的当前选择的id
            idList1:[], //用来传给选择部门组件的当前选择的id 
            assignTemporarilyList:[], //选择指派成员组件暂存接收
            roleIdList:[], //用来传给选择角色，部门组件的当前选择的id
            actionCheckList:['重新提交'], //动作配置列表
            backNodeList: [], // 可选择的退回节点列表
            backNode:{},// 选择的可退回节点列表
            roleInfoList:[],//接收传过来的成员对象数组
            roleInfoList1:[],//接收传过来的角色对象数组
            roleInfoList2:[],//接收传过来的部门对象数组
            assignList:[],//接收传过来的指派成员对象数组
            assignList1:[],//接收传过来的指派角色对象数组
            assignList2:[],//接收传过来的指派部门对象数组
            
            auditMode:"1",// 多人审核模式
            operator:['<','<=','=','≠','>','>='],
            operatorValue:'>',
            money:'',
            diaType:0, // 选择的是角色还是部门
            backNodeTemporarily:[], //暂时的退回节点列表
            actionSpecificList:[], // 动作列表信息
            condition:'',//条件
            showCondition: false,// 是否显示条件
        }
    },
    computed: {
        ...mapState(['approverConfig1', 'approverDrawer','conditionsConfig1','dataList','showLoading','showZZ','showEdit']),
    },
    watch: {
        approverConfig1(val) {
            this.approverConfig = val.value;
        },
        conditionsConfig1(val) {
            this.conditionsConfig = val.value;
            this.PriorityLevel = val.priorityLevel
            this.conditionConfig = val.priorityLevel
                ? this.conditionsConfig.conditionNodes[val.priorityLevel - 1]
                : { nodeUserList: [], conditionList: [] }
        },
      nodeInfo: {
        handler(newVal){
          console.log(newVal,'-------------newVal----------')
        },
        deep:true
      },
      roleInfoList: {
        handler(newVal){
          console.log(newVal,'-------------监听审批人列表----------')
        },
        deep:true
      },
      showAppr(newVal){
        console.log(this.nodeInfo.prevStepId,5444)
        this.prevNodeFun(this.dataList,this.nodeInfo.prevStepId)
        this.makeUserList = this.nodeInfo.csr
        if(this.makeUserList&&this.makeUserList.length>0){
          this.makeUserList.map((item,index) => {
            this.makeUserIdList.push(item.id)
          });
        }

        this.assignTemporarilyList = this.nodeInfo.csr
        if(this.assignTemporarilyList&&this.assignTemporarilyList.length>0){
          this.makeUserList.map((item,index) => {
            this.assignTemporarilyList.push(item.id)
          });
        }

        if(newVal&&(this.showZZ||this.showEdit)){
          let appointList = this.nodeInfo.auditType // 回显选择人员的方式
          let userPermissionSpecific = this.nodeInfo.userPermissionSpecific // 回显选择人员的具体人员
          if(appointList.indexOf("指定成员")!=-1){
            this.appoint = true
            this.roleInfoList = userPermissionSpecific.designatedPerson
            let memberIdList = userPermissionSpecific.memberIdList
            this.idList = memberIdList
            
          }
          if(appointList.indexOf("指定角色")!=-1){
            this.appoint1 = true
            this.roleInfoList1 = userPermissionSpecific.designatedRoles
            this.roleIdList = this.roleInfoList1
            
          }
          if(appointList.indexOf("指定部门")!=-1){
            this.appoint2 = true
            this.roleInfoList2 = userPermissionSpecific.designatedDepartments
            this.idList1 = []
            this.roleInfoList2.map((item)=>{
              this.idList1.push(item.id)
            })
          }
          console.log(this.nodeInfo,'----------返回的信息')
          let actList = ['重新提交']
          this.nodeInfo.actionSpecificList.forEach(item=>{
            actList.push(item.name)
          })
          this.actionCheckList = actList
          let backList = []
          backList.push(this.nodeInfo.backNode)
          this.backNodeList = backList
          this.backNode = this.nodeInfo.backNode
          this.condition = this.nodeInfo.condition // 条件
        }
      },
      
      
      
      
    },
    methods: {
        ...mapMutations(['setApproverConfig', 'setApprover','setCondition', 'setConditionsConfig']),
        
        
        closeDrawer() {
          this.$emit('hideAppr',false)
        },
        
        saveApprover() { // 保存配置
          if(!this.showZZ){
            if(this.actionCheckList.indexOf('同意')==-1&&this.actionCheckList.indexOf('提交')==-1){
              this.$message.error('动作设置中同意与提交至少选择一个');
              return false
            }
            this.recurrenceFun(this.dataList,this.nodeInfo)
            this.$store.state.showLoading = true;
          }else{
            this.closeDrawer()
          }
          
          
        },
        showDialog(type,diaType){ // 显示选择审核人组件
          this.type = type
          this.diaType = diaType

          if(diaType==0){ // 选择成员
            this.$refs.memberDialog.isMemberDialog = true
            this.$refs.personnel.isPersonnel = false
            this.$refs.role.isRole = false
          }else if(diaType==1){ // 选择角色
            console.log(this.idList1,'--------------选中的角色id')
            this.$refs.memberDialog.isMemberDialog = false
            this.$refs.personnel.isPersonnel = false
            this.$refs.role.isRole = true
          }else if(diaType==2){ // 选择部门
            this.$refs.memberDialog.isMemberDialog = false
            this.$refs.personnel.isPersonnel = true
            this.$refs.role.isRole = false
          }

          // console.log(this.diaType,'-------传过去的类型')
          // if(diaType==0){
          //   if(type==1){ // 选择审核人
          //     // let idList = []
          //     // this.roleInfoList.forEach(i =>{
          //     //   idList.push(i.id)
          //     // })
          //     // this.idList = idList
          //   }else if(type==2){ // 选择抄送人
          //     // let idList = []
          //     // this.assignList.forEach(i =>{
          //     //   idList.push(i.id)
          //     // })
          //     // this.idList = idList
          //   }else{ // 选择抄送人
          //     // this.idList = this.makeUserIdList
          //   }
          //   this.$refs.memberDialog.isMemberDialog = true
          //   this.$refs.personnel.isPersonnel = false
          //   this.$refs.role.isRole = false
          // }else if(diaType==2){ //打开部门
          //   if(type==1){ // 选择审核人
          //     if(this.diaType==0){
          //       this.roleIdList = this.roleInfoList
          //     }else if(this.diaType==1){
          //       this.roleIdList = this.roleInfoList1
          //     }else if(this.diaType==2){
          //       this.roleIdList = this.roleInfoList2
          //     }
              
          //     console.log(this.roleIdList,'--------------this.roleIdList--------------')
          //   }else{ // 选择抄送人
              
          //     this.roleIdList = this.makeUserIdList
          //   }
          //   this.$refs.memberDialog.isMemberDialog = false
          //   this.$refs.personnel.isPersonnel = true
          //   this.$refs.role.isRole = false
          // }else {
          //   if(type==1){ // 选择审核人
          //     if(this.diaType==0){
          //       this.roleIdList = this.roleInfoList
          //     }else if(this.diaType==1){
          //       this.roleIdList = this.roleInfoList1
          //     }else if(this.diaType==2){
          //       this.roleIdList = this.roleInfoList2
          //     }
              
          //     console.log(this.roleIdList,'--------------this.roleIdList--------------')
          //   }else if(type==2){ // 选择指派人
          //     if(this.diaType==0){
          //       this.roleIdList = this.assignList
          //     }else if(this.diaType==1){
          //       this.roleIdList = this.assignList1
          //     }else if(this.diaType==2){
          //       this.roleIdList = this.assignList2
          //     }
              
          //   }else {
          //     this.roleIdList = this.makeUserIdList
          //   }
          //   this.$refs.memberDialog.isMemberDialog = false
          //   this.$refs.personnel.isPersonnel = false
          //   this.$refs.role.isRole = true
          // }
          
          
        },
        selectListFun(val){ // 处理已选择的成员id，给组件传参用
          if(this.type==1){ // 审核人相关
            
            this.roleInfoList = val[0]
            this.idList = []
            val[1].map((item)=>{
              this.idList.push(item.id)
            })


            console.log(this.idList,'--------审核人列表---------')
          }else if(this.type==2){
            
            this.assignList = val[0]
            this.idList = []
            val[1].map((item)=>{
              this.idList.push(item.id)
            })
            console.log(this.assignList,'--------指派人列表---------')
          }
          
          
        },

        selectListFun1(val){ // 处理已选择的成员id，给组件传参用
          if(this.type==1){
            this.roleInfoList2 = val
            this.idList1 = []
            val.map((item)=>{
              this.idList1.push(item.id)
            })
          }else if(this.type==2){
            this.assignList2 = val
            this.idList1 = []
            val.map((item)=>{
              this.idList1.push(item.id)
            })
          }
          
        },
        

        selectListFun2(val){ // 处理已选择的角色
          if(this.type==1){ // 审核人相关
            this.roleInfoList1 = val
          }else if(this.type==2){ // 指派人
            this.assignList1 = val
          }
        },
        changeAction(val){ // 更改选择动作时
          this.backNodeList = []
          if(val.indexOf('退回')!=-1) {
            this.backNodeFun(this.dataList,this.nodeInfo.prevStepId)
          }else{
            this.backNodeList = []
          }
          
        },
        backNodeFun(list,id){ // 查找可退回节点
          try{
            let prevId = id
            list.forEach((item,index)=>{
              
              if(item.children&&item.children.length>0){
                if(item.stepId==id){ // 进来就肯定是分支和线路，审核人节点是进不来的
                  this.backNodeFun(this.dataList,item.prevStepId)
                  throw new Error("EndIterative");
                }else{
                  this.backNodeFun(item.children,prevId)
                }
                
              }else{
                if(item.stepId==id){
                  if(item.type!=='regular'&&item.type!=='initiate'){ // 判断是不是固定节点，不是固定节点才添加，不可退回到固定节点，可退回到发起人
                    this.backNodeList.push(item)
                  }
                  if(item.prevStepId){
                    this.backNodeFun(this.dataList,item.prevStepId)
                  }
                  throw new Error("EndIterative");
                }
              }
            })
          }catch(e){
            if(e.message != "EndIterative") throw e;
          }
        },
        prevNodeFun(list,id){ // 获取当前节点的上一个节点
          try{
            let prevId = id
            list.forEach((item,index)=>{
              if(item.children&&item.children.length>0){
                if(item.stepId==id){ // 进来就肯定是分支和线路，审核人节点是进不来的
                  console.log(item,'找到的节点11111')
                  if(item.type=='conditionLine'){
                    this.showCondition = true
                  }else{
                    this.showCondition = false
                  }
                  throw new Error("EndIterative");
                }else{
                  this.prevNodeFun(item.children,prevId)
                }
                
              }else{
                if(item.stepId==id){
                  console.log(item,'找到的节点')
                  if(item.type=='conditionLine'){
                    this.showCondition = true
                  }else{
                    this.showCondition = false
                  }
                  throw new Error("EndIterative");
                }
              }
            })
          }catch(e){
            if(e.message != "EndIterative") throw e;
          }
        },

        
        
        recurrenceFun(list,info){
          try{
            list.forEach((item,index)=>{
              if(item.children&&item.children.length>0){
                if(item.stepId==info.stepId){
                  console.log(item,'--------zhaodaoni1,理论上是进不来的')
                }else{
                  this.recurrenceFun(item.children,this.nodeInfo)
                }
                
              }else{
                if(item.stepId==info.stepId){
                  let auditType = []
                  if(this.appoint){
                    auditType.push('指定成员')
                  }
                  if(this.appoint1){
                    auditType.push('指定角色')
                  }
                  if(this.appoint2){
                    auditType.push('指定部门')
                  }
                  item.auditType = auditType // 审核人类型
                  
                  item.userPermissionSpecific.examineType = this.auditMode // 审核方式
                  item.userPermissionSpecific.designatedPerson = this.roleInfoList // 指定成员
                  item.userPermissionSpecific.memberIdList = this.idList // 指定成员的组织架构id
                  item.userPermissionSpecific.designatedRoles = this.roleInfoList1 // 指定角色
                  item.userPermissionSpecific.designatedDepartments = this.roleInfoList2 // 指定部门
                  item.userIdList = this.roleInfoList.concat(this.roleInfoList1).concat(this.roleInfoList2) // 组合起来渲染用
                  item.condition = this.condition // 条件
                  this.actionCheckList.forEach(actionItem =>{
                    console.log(actionItem)
                    if(actionItem=='同意'){
                      let obj = {
                        actionType: "AGREE",
                        type : "AGREE",
                        name :"同意",
                        stepId :item.stepId,
                        isRecord :false
                      }
                      this.actionSpecificList.push(obj)
                    }else if(actionItem=='退回'){
                      if(JSON.stringify(this.backNode)!=='{}'){
                        if(!this.backNode.key){
                          this.$message.error('请先保存选择的退回节点信息');
                          return
                        }else{
                          let obj = {
                            actionType: "BACK",
                            type : "BACK",
                            name :"退回",
                            stepId :item.stepId,
                            targetNodeKey:this.backNode.key,
                            backType:'重新走流程',
                            isRecord :false
                          }
                          console.log(this.backNode,'----------退回节点信息')
                          item.backNode = this.backNode // 退回节点
                          console.log(item,'----------当前节点信息')
                          this.actionSpecificList.push(obj)
                        }
                      }
                    }else if(actionItem=='拒绝'){
                      let obj = {
                        actionType: "REJECT",
                        type : "REJECT",
                        name :"拒绝",
                        stepId :item.stepId,
                        isRecord :false
                      }
                      this.actionSpecificList.push(obj)
                    }else if(actionItem=='取消'){
                      let obj = {
                        actionType: "CANCEL",
                        type : "CANCEL",
                        name :"取消",
                        stepId :item.stepId,
                        isRecord :false
                      }
                      this.actionSpecificList.push(obj)
                    }else if(actionItem=='提交'){
                      let obj = {
                        actionType: "SUBMIT",
                        type : "SUBMIT",
                        name :"提交",
                        stepId :item.stepId,
                        isRecord :false
                      }
                      this.actionSpecificList.push(obj)
                    }else if(actionItem=='指派'){
                      let obj = {
                        actionType: "ASSIGN",
                        type : "ASSIGN",
                        name :"指派",
                        stepId :item.stepId,
                        isRecord :false
                      }
                      this.actionSpecificList.push(obj)
                    }else if(actionItem=='重新提交'){
                      let obj = {
                        actionType: "RESUBMIT",
                        type : "RESUBMIT",
                        name :"重新提交",
                        stepId :item.stepId,
                        isRecord :false
                      }
                      this.actionSpecificList.push(obj)
                    }
                    
                  })
                  
                  item.actionSpecificList = this.actionSpecificList
                  createNode({
                    "processNodeSpecific":item,
                    "userPermissionSpecific":item.userPermissionSpecific,
                    "actionSpecificList":this.actionSpecificList,
                    "conditionFlag":this.condition
                  }).then((data)=>{
                    item.key = data.key
                    this.$store.state.showLoading = false;
                    this.closeDrawer()
                  })
                  throw new Error("EndIterative");
                }
              }
            })
          }catch(e){
            if(e.message != "EndIterative") throw e;
          }
          
        },
    }
}
</script>
<style lang="less" scoped  >

.appr_box{
  width: 100%;
  height: auto;
  padding: 20px;
}
.top{
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}
.list{
  box-sizing: border-box;
  margin-bottom: 20px;
}
.personnel_box{
  font-size: 14px;
  margin-top: 10px;
}
.personnel_box>span{
  margin-right: 10px;
}
.footer{
  position: fixed;
  bottom: 30px;
  right: 20px;
}
.box-card{
  margin-bottom: 20px;
  font-size: 16px;
  color: #409EFF;
}
.icon{
  margin-right: 10px;
  color: #222;
}
.lable_box1{
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}
.tag_box{
  margin: 5px;
}
.condition_list{
  font-size: 12px;
  color: #222;
}
.operator_box{
  width: 80px;
  margin: 0 10px;
}
.condition_inp{
  width: 200px;
}
.btn_qx{
  margin-left: 30px;
}
.zz{
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0);
  z-index: 99999;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
.condition_title{
  margin-right: 20px;
}
</style>